<template>
  <a-col :span="span" style="height:360px;">
    <div class="block">
      <div class="titleBox">
        <div class="title"><span>工单统计</span></div>
        <div>
          <a-radio-group
            default-value="1"
            button-style="solid"
            @change="radioHandle"
          >
            <a-radio-button
              v-for="(item, index) in radioOptions"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>

      <div class="progressBox">
        <div v-for="(item, index) in progressLists" :key="index" class="item">
          <Progress
            :progressData="item"
            :maxCount="progressLists[0].count"
          ></Progress>
        </div>
      </div>
    </div>
  </a-col>
</template>

<script>
import Progress from "./progress";
import api from "@/server/userConfig";

export default {
  name: "Ranking",
  props: {
    span: Number,
    rankingData: Object
  },
  components: {
    Progress
  },
  data() {
    return {
      progressLists: [],
      radioOptions: [
        { label: "已完成", value: "1", disabled: false },
        { label: "未完成", value: "2", disabled: false }
      ],
      stateType: 1
    };
  },
  watch: {
    rankingData: function(newVal) {
      let { startTime, endTime, timeType } = newVal;
      this.getLineOfAfterSaleByState(newVal, "progressLists");
    }
  },
  methods: {
    async getLineOfAfterSaleByState(parames, key) {
      const res = await api.getLineOfAfterSaleByState({
        startTime: parames.startTime,
        endTime: parames.endTime,
        state: this.stateType
      });

      if (res.MsgCode !== 0) {
        return;
      }
      let list = res.Data.sort((a, b) => b.count - a.count);
      this[key] = list;
    },
    radioHandle(e) {
      console.log(e.target.value);
      this.stateType = e.target.value;
      let { startTime, endTime, timeType } = this.rankingData;
      this.getLineOfAfterSaleByState(
        { startTime, endTime, state: this.stateType },
        "progressLists"
      );
    }
  },
  created() {},
  mounted() {},
  destroyed() {}
};
</script>

<style scoped="scoped">
.block {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  padding-top: 24px;
  padding-left: 44px;
}

.titleBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.titleBox > .title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
  margin-right: 30px;
}

.progressBox {
  padding-top: 16px;
  padding-left: 44px;
}

.progressBox > .item {
  padding: 4px 0;
  margin: 4px 0;
}
</style>
